<script setup>
import { onMounted, onUnmounted, getCurrentInstance } from 'vue';
import { useRouter, } from 'vue-router'
// import { ElMessage } from 'element-plus'
import CanvasNest from 'canvas-nest.js';
import { ref } from "vue";
// import { useStore } from 'vuex'
const app = getCurrentInstance().appContext.app
const ElMessage = getCurrentInstance().appContext.config.globalProperties.$message
const router = useRouter()
// const store = useStore()
function goHome() {
    router.replace('/home')
}
let cn;
onMounted(() => {
    const ele = document.getElementById('loginbg')
    const config = {
        color: '200,170,189',
        opacity: 1,
        zIndex: -2,
        count: 150,
    };
    cn = new CanvasNest(ele, config);
})
onUnmounted(() => {
    cn.destroy();
})
function message() {
    ElMessage({
        message: '暂未开放',
        duration: 1000,
    })
}
// 获取公钥

//检查密码
let id = ref('')
let password = ref('')
function check() {
    //用户名和密码不能为空
    if (id.value.length === 0 || password.value.length === 0) {
        ElMessage({
            message: '用户名或密码为空',
            type: 'warning',
            duration: 2000
        })
    }
    else if (password.value.length > 16) {
        ElMessage({
            message: '密码过长',
            type: 'warning',
            duration: 2000
        })
    }
    else {
        console.log(id.value)
        console.log(password.value)
        let willpost = {
            Type: 'login',
            ID: id.value,
            PASSWORD: password.value
        }
        const axios = app.axios
        axios.post('api/login/', willpost)
            .then(function (response) {
                console.log(response.data)
                if(response.data==='OK'){
                    console.log('登录成功')
                    router.replace('/home')
                }
                else{
                    ElMessage.error('密码错误')
                }
                
            })
            .catch(function (error) {
                ElMessage.error('网络异常')
                console.log(error)
            })
    }
}
</script>
    
<template>
    <div class="background" id="loginbg">
        <div class="loginbox">
            <div class="left"></div>
            <div class="right">
                <h4>登 录</h4>
                <form action>
                    <input class="acc" type="text" placeholder="用户名" v-model="id" />
                    <input class="acc" type="password" placeholder="密码" v-model="password" />
                    <input class="submit" @click="check" type="button" value="Login" />
                </form>
                <div class="fn">
                    <a @click.prevent="message">注册账号</a>
                    <a @click.prevent="message">找回密码</a>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.background {
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background: url("../assets/bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 0;
}
::selection {
    color: #fff;
    background-color: rgb(144, 129, 241);
}
.loginbox {
    border: 1px gray solid;
    box-shadow: 10px 10px 5px #000000;
    display: flex;
    overflow: hidden;
    width: 900px;
    height: 550px;
    background-color: rgba(255, 255, 255, 60%);
    border-radius: 60px;
    margin: 5% auto;
    box-shadow: 0 0 16px 5px rgb(255 255 255 / 70%);
}
.loginbox .left {
    opacity: 1;
    position: relative;
    width: 45%;
    height: 100%;
    background-color: skyblue;
}
.left::before {
    /* margin-left: -5%; */
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../assets/ytl.png);
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 90%;
}
.right {
    /* margin-top: 5%; */
    display: flex;
    width: 65%;
    flex-direction: column;
    align-items: center;
}
.right h4 {
    color: rgb(144, 129, 241);
    font-size: 30px;
    margin-top: 50px;
}

.right form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.right form .acc {
    outline: none;
    width: 80%;
    height: 50px;
    font-size: 19px;
    margin-top: 50px;
    padding: 10px 0 0 1.6px;
    border: none;
    border-bottom: 1px solid rgb(144, 129, 241);
    color: rgb(144, 129, 241);
    background-color: rgba(0, 0, 0, 0);
}

.right form .acc:focus {
    outline: none;
    color: rgb(144, 129, 241);
    padding: 10px 0 0 1.6px;
}

.right .submit {
    opacity: 1;
    width: 60%;
    height: 50px;
    color: #f6f6f6;
    background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
    font-size: 14px;
    border: none;
    border-radius: 5px;
    margin: 60px 0 0 50%;
    transform: translateX(-50%);
    cursor: pointer;
}

.right .submit:hover {
    box-shadow: 0 0 20px -5px rgb(0 0 0 / 15%);
}

.right .fn {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    width: 70%;
}

.right .fn a {
    font-size: 13px;
    margin-top: 50px;
    padding: 10px 20;
    color: #666;
    text-decoration: none;
}

.right .fn a:hover {
    color: rgb(144, 129, 241);
}
.fn a {
    cursor: pointer;
}
</style>
